/**
 * 拖拽调整大小手柄组件
 */

import React from 'react';

interface ResizeHandleProps {
  direction: 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  onMouseDown: (e: React.MouseEvent) => void;
}

const ResizeHandle: React.FC<ResizeHandleProps> = ({ direction, onMouseDown }) => {
  const getStyle = (): React.CSSProperties => {
    const baseStyle: React.CSSProperties = {
      position: 'absolute',
      zIndex: 10,
    };

    switch (direction) {
      case 'left':
        return {
          ...baseStyle,
          left: 0,
          top: 0,
          bottom: 0,
          width: '4px',
          cursor: 'ew-resize',
        };
      case 'right':
        return {
          ...baseStyle,
          right: 0,
          top: 0,
          bottom: 0,
          width: '4px',
          cursor: 'ew-resize',
        };
      case 'top':
        return {
          ...baseStyle,
          left: 0,
          right: 0,
          top: 0,
          height: '4px',
          cursor: 'ns-resize',
        };
      case 'bottom':
        return {
          ...baseStyle,
          left: 0,
          right: 0,
          bottom: 0,
          height: '4px',
          cursor: 'ns-resize',
        };
      case 'top-left':
        return {
          ...baseStyle,
          left: 0,
          top: 0,
          width: '12px',
          height: '12px',
          cursor: 'nwse-resize',
        };
      case 'top-right':
        return {
          ...baseStyle,
          right: 0,
          top: 0,
          width: '12px',
          height: '12px',
          cursor: 'nesw-resize',
        };
      case 'bottom-left':
        return {
          ...baseStyle,
          left: 0,
          bottom: 0,
          width: '12px',
          height: '12px',
          cursor: 'nesw-resize',
        };
      case 'bottom-right':
        return {
          ...baseStyle,
          right: 0,
          bottom: 0,
          width: '12px',
          height: '12px',
          cursor: 'nwse-resize',
        };
      default:
        return baseStyle;
    }
  };

  return (
    <div
      style={getStyle()}
      onMouseDown={onMouseDown}
      onMouseEnter={(e) => {
        // 悬停时显示提示
        if (direction === 'left' || direction === 'right') {
          e.currentTarget.style.backgroundColor = 'rgba(102, 126, 234, 0.3)';
        }
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = 'transparent';
      }}
    />
  );
};

export default ResizeHandle;
